import { SideTheme } from '@/store/types'
import useAppConfigStore from '@/store/modules/app-config';
export default function useSidebarTheme(theme: SideTheme = SideTheme.WHITE) {
  document.body.setAttribute('sidebar-theme', theme)
}

// 获取所有的侧边栏主题样式变量
export function useSidebarThemeCssVariables() {
  const appConfigStore = useAppConfigStore()
  const defaultTheme = appConfigStore.sideTheme
  const sideThemeVariables: any = {};
  return new Promise(resolve => {
    const getThemeVariables = () => {
      Object.values(SideTheme).forEach(theme => {
        useSidebarTheme(theme)
        const computedStyle = getComputedStyle(document.body);
        // 提取CSS变量
        sideThemeVariables[theme] = {
          leftLogo: computedStyle.getPropertyValue('--left-logo'),
          leftBg: computedStyle.getPropertyValue('--left-bg'),
          leftColor: computedStyle.getPropertyValue('--left-color'),
          archMenuBg: computedStyle.getPropertyValue('--arch-menu-bg'),
          leftHoverBg: computedStyle.getPropertyValue('--left-hover-bg'),
          leftSelectBg: computedStyle.getPropertyValue('--left-select-bg'),
          rightTopBg: computedStyle.getPropertyValue('--right-top-bg'),
          rightTopColor: computedStyle.getPropertyValue('--right-top-color'),
          rightBottomBg: computedStyle.getPropertyValue('--right-bottom-bg')
        };
      })
      useSidebarTheme(defaultTheme)
    }
    // 检查页面是否已经加载完成
    if (document.readyState === 'complete' || document.readyState === 'interactive') {
      getThemeVariables()
      resolve(sideThemeVariables)
    } else {
      document.addEventListener('DOMContentLoaded', () => {
        getThemeVariables()
        resolve(sideThemeVariables)
      })
    }
    
  })
}